<template>
	<div>
		{{ticked.size}}, {{expanded.size}}
		<Tree
			ref="tree"
			obj-key="id"
			:selected.sync="selected"
			:tree-ticked.sync="ticked"
			:tree-expanded.sync="expanded"
			:emit-all-ticked="emitAllSelected"
			:data="realData"
			:filter="realFilter"
			:virtual-scroll="virtualScroll"
			:select-toggle="selectToggle"
			:ticked-on-click="tickedOnClick"
			:selectable="selectable"
			:loading="loading"
			tick-strategy="leaf-filtered"
			style="margin:20px;width:180px;height:300px;border:1px solid;background:#fff;"
			@all-ticked="allSelected">
			<template v-if="customTemplate" #content="{value,meta}">
				<div>{{meta.key}}-{{value}}</div>
			</template>
			<template v-if="customTemplate" #loading="{height}">
				加载中{{height}}
			</template>
			<template v-if="customTemplate" #no-data="{height}">
				你是在火星吗?{{height}}
			</template>
			<template v-if="customTemplate" #no-results="{height}">
				你到底想找什么?{{height}}
			</template>
		</Tree>
		<Input v-model="filter" placeholder="过滤条件" style="width:200px;margin:20px"/>
		<Checkbox v-model="regexp" label="正则" style="margin:20px"/>
		<Checkbox v-model="loading" label="加载中" style="margin:20px"/>
		<Checkbox v-model="emptyData" label="空数据" style="margin:20px"/>
		<Checkbox v-model="customTemplate" label="自定义插槽" style="margin:20px"/>
		<Checkbox v-model="virtualScroll" label="虚拟滚动" style="margin:20px"/>
		<Checkbox v-model="selectToggle" label="选择切换" style="margin:20px"/>
		<Checkbox v-model="emitAllSelected" label="发射所有选中和半选中" style="margin:20px"/>
		<Checkbox v-model="tickedOnClick" label="点击时勾选" style="margin:20px"/>
		<Checkbox v-model="selectable" label="允许选中" style="margin:20px"/>
		<Button @click="$refs.tree.setMatchesExpanded(true)" style="margin:20px">展开</Button>
		<Button @click="$refs.tree.setMatchesExpanded(false)" style="margin:20px">收缩</Button>
		<br/>
<!--		<QTree :nodes="data" node-key="id" tick-strategy="strict" style="margin:20px"></QTree>-->
		懒加载树
		<Tree
			:selectable="false"
			obj-key="id"
			:data="data2"
			@tree-lazy-load="lazyLoad"
			style="margin:20px;width:180px;height:300px;border:1px solid;background:#fff;"/>
		<button @click="refresh">刷新数据</button>
		自动高度
		<Tree
			auto-height
			:selectable="false"
			obj-key="id"
			:data="data2"
			@tree-lazy-load="lazyLoad"
			style="margin:20px;width:180px;background:#fff;"/>
		<button @click="refresh">刷新数据</button>
	</div>
</template>

<script>
import Tree from '@/components/pc/tree/index';
import Checkbox from '@/components/pc/checkbox';
import Input from '@/components/pc/input';
import Button from '@/components/pc/button';
import {MySet} from '@/util/polyfill';

let id=0;
function build(sizeList,pre=''){
	if(sizeList.length){
		const size=sizeList[0];
		const list=new Array(size);
		const nextSizeList=sizeList.slice(1);
		for(let i=0;i<size;++i){
			list[i]={id:++id,label:`节点${pre}-${i}`,children:build(nextSizeList,`${pre}-${i}`)};
		}
		return list;
	}
	return [];
}
const data=build([100,10,10,10]);
Object.freeze(data);
console.log(id/10000);
export default {
	name:'index',
	components:{
		Tree,
		Checkbox,
		Input,
		Button,
	},
	data(){
		// data[0].children[0].children[0]._tickable=false;
		// data[0].children[1].children[0]._tickable=false;
		// data[0].children[2].children[0]._tickable=false;
		// data[0].children[2].children[1]._tickable=false;
		// data[0].children[2].children[2]._tickable=false;
		// data[0].children[3].children[0]._noTick=true;
		// data[0].children[3].children[1]._noTick=true;
		// data[0].children[3].children[2]._noTick=true;
		// data[0].children[4]._noTick=true;
		return {
			data,
			realData:[],
			ticked:new MySet(),
			expanded:new MySet(),
			selected:null,
			data2:[],
			filter:'',
			loading:false,
			emptyData:false,
			customTemplate:false,
			virtualScroll:true,
			selectToggle:false,
			emitAllSelected:false,
			regexp:false,
			tickedOnClick:false,
			selectable:true,
		};
	},
	computed:{
		realFilter(){
			if(this.regexp){
				try{
					return new RegExp(this.filter);
				}catch{}
			}
			return this.filter;
		}
	},
	watch:{
		emptyData:{
			handler(val){
				if(val){
					this.realData=[];
				}else{
					this.realData=this.data;
				}
			},
			immediate:true
		}
	},
	created(){
		this.refresh();
	},
	methods:{
		lazyLoad({meta,done,fail}){
			console.log(meta);
			//模拟请求服务器1秒
			setTimeout(() => {
				if(meta.key==='1'){
					done([
						{id:'1-1',label:'子节点1-1'},
						{id:'1-2',label:'子节点1-2'},
					]);
				}else{
					//懒加载失败
					fail();
				}
			},2000);
		},
		allSelected(nodes){
			console.log(nodes);
		},
		refresh(){
			this.data2=[
				{id:'1',label:'懒加载节点1',_treeLazy:true},
				{id:'2',label:'懒加载节点2',_treeLazy:true},
				{
					id:'3',
					label:'非懒加载节点3',
					children:[
						{id:'3-1',label:'子节点3-1'},
						{id:'3-2',label:'子节点3-2',_treeLazy:true},
					]
				}
			];
		}
	}
};
</script>

<style lang="scss">

</style>
